<template>
  <view>
    <u-navbar
        title="添加建议反馈"
        placeholder
        titleStyle="color:black"
        leftIconColor="#000"
        :background="navbarStyel">
    </u-navbar>
    <view class="top">
      建议类型
      <text style="color: crimson">*</text>
      <view class="itemContent">
        <view class="itemType" :class="currentIndex === index?'item_bg':'item_bg1'" v-for="(item,index) in listType"
              :key="index" @click="chooseType(index)">
          {{ item }}
        </view>
      </view>
    </view>
    <view class="content1">
      建议描述
      <text style="color: crimson">*</text>
      <view style="margin-top: 30rpx"></view>
      <textarea v-model="formData.content" placeholder="请输入内容" count maxlength="200" border="none"></textarea>
    </view>
    <view class="content2">
      上传图片
      <text style="color: crimson">*</text>
      <view style="margin-top: 30rpx"></view>
      <view class="upload_box">
        <u-upload :action="action" name="file"
                  upload-text="上传图片" max-count="9" :header="HeaDers" :multiple="true"
                  @on-success="Upsuccess" @on-remove="Remove" ></u-upload>
      </view>
    </view>
    <view class="content3">
      <view>
        联系电话
        <text style="color: crimson">*</text>
      </view>
      <view class="input_content">
        <u-input v-model="formData.phone" placeholder="请输入手机号" count maxlength="200" border="none"
                  :placeholderStyle="{fontsize:'29rpx',color: '#bbbbbb'}"></u-input>
      </view>
    </view>
    <view class="content3" v-if="currentIndex===0 || currentIndex===1 || currentIndex===2 || currentIndex===4">
      <view>
        选择订单
        <text style="color: crimson">*</text>
      </view>
      <view class="input_content">
        <text v-if="!order_no" style="color: #bbbbbb;font-size: 29rpx">{{ order_no || '请选择点单号' }}</text>
        <text v-else style="color: #666666;font-size: 29rpx">{{ order_no || '请选择点单号' }}</text>
      </view>
      <view>
        <button :hairline="false" class="up-button" size="mini" @click="toChooseOrder">
          <text style="font-size: 24rpx;padding: 10rpx;color: #000000">选择</text>
        </button>
      </view>
    </view>
    <view class="circle_btn"  @click="toFeedbackList">
      <view style="margin: auto">
        <view style="margin: auto">我的</view>
        <view style="margin: auto">反馈</view>
      </view>
    </view>
    <view style="height: 80rpx"></view>
    <button class="submit up-button" :customStyle="{marginTop: '20px',color: 'black'}" size="large" @click="submitFeedBack">
      提交建议反馈
    </button>
    <view style="padding-bottom: env(safe-area-inset-bottom)"></view>
  </view>
</template>

<script>
import {baseUrl} from "@/api/request";
import $api from "@/api/api";

export default {
  data() {
    return {
      navbarStyel: {
        backgroundColor: '#FDE52F',
        color: '#000000'
      },
      listType: ['订单问题', '餐品问题', '商家问题', '程序BUG', '售后问题', '其他反馈'],
      currentIndex: 0,
      // 最大图片数量
      action: baseUrl + '/api/order/upload',
      HeaDers: {
        'authorization': uni.getStorageSync('token')
      },
      order_no: '',
      // 提交数据源
      formData: {
        type: '1',
        content: '',
        phone: '',
        link_order: '',
        imgs: []
      },


    };
  },
  methods: {
    // 选择问题类型
    chooseType(index) {
      this.currentIndex = index;
      this.formData.type = Number(index + 1)
    },
    // 跳转问题反馈类别页面
    toFeedbackList(){
      uni.navigateTo({
        url: '/subpackageA/pages/feedback/feedback'
      })
    },
    // 上传图片
    Upsuccess(data, index, lists, name) {
      const that = this
      console.log('上传的图', data)
      console.log('上传name=',  name)
      // 提示用户上传图片不能超过10M
      if (data.result.size > 1048576){
        uni.showModal({
          title: '提示',
          content: '您上传的图片过大，请重新上传',
          confirmColor: '#FF4910',
          success: function (res) {
            if (res.confirm) {

            } else if (res.cancel) {

              //console.log('用户点击取消');
            }
          }
        });
      } else  {
        uni.showToast({
          title: '图片上传成功',
          icon: 'success',
          duration: 3000
        });
        that.formData.imgs.push(data.result.show_path);
        console.log('上传图==', that.formData.imgs)
      }
    },
    // 删除图片
    Remove(index, lists, name) {
      const that = this
      console.log('移除图片索引',index)
      that.formData.imgs.splice(index, 1)
      console.log('删除图==', that.formData.imgs)
    },
    // 验证并提交意见反馈
    async submitFeedBack(){
      let that = this
      console.log("submitFeedBack", this.formData)
      if (!that.formData.content) {
        await uni.showToast({title: '请输入建议描述', icon: 'none'})
        return
      }
      if (!that.formData.phone || that.formData.phone.length !== 11) {
        await uni.showToast({title: '请输联系电话', icon: 'none'})
        return
      }
      if (!that.formData.link_order && (that.formData.type === 1 || that.formData.type === 2 || that.formData.type === 3 || that.formData.type === 5)) {
        console.log('订单链接为空')
        await uni.showToast({title: '请输选择订单', icon: 'none'})
        return
      }
      if (!that.formData.imgs || that.formData.imgs.length === 0) {
        await uni.showToast({title: '请添加图片', icon: 'none'})
        return
      }
      await that.$api.getFeedbackAPI(that.formData).then(res => {
        console.log('提交成功', res.data)
        if (res.data.code === 200) {
          uni.showToast({
            title: '提交成功',
            icon: 'success',
            duration: 1500
          })
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/WoDe/WoDe'
            })
          }, 1500)
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          })
        }
      })

    },
    // 跳转订单选择页面
    toChooseOrder(){
      uni.navigateTo({
        url: '/subpackageA/pages/feedback/feedorder',
      })
    },
    // 选择订单返回的数据
    getValue(data) {
      console.log('选择订单返回的数据', data)
      this.order_no = data
      this.formData.link_order = data
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #F6F6F6;
}
</style>

<style scoped lang="scss">
.up-button{
  background-color: #fbe32f;
  border-radius: 60rpx;
}
.up-button:after{
  border: none;
}
.submit{
  margin: 0 30rpx;
}
.top, .content1, .content2, .content3 {
  background-color: #FFFFFF;
  padding: 30rpx;
  margin-bottom: 20rpx;
  font-size: 30rpx;
}

.circle_btn{
  width: 90rpx;
  height: 90rpx;
  background-color: #FDE52F;
  position: fixed;
  bottom: 580rpx;
  right: 20rpx;
  border-radius: 100rpx;
  font-size: 20rpx;
  display: flex;
  text-align: center;
  align-items: center;
  box-shadow: #B1B1B1 2px 2px 8px;
}

.bottom {
  width: 100%;
  position: fixed;
  bottom: 0;
}

.itemContent {
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 auto;

  .itemType {
    background-color: #F6F6F6;
    border-radius: 10rpx;
    padding: 20rpx 52rpx;
    margin-top: 20rpx;
    margin-right: 26rpx;
    color: #666666;
    font-size: 26rpx;
  }

  .itemType:nth-of-type(3n) {
    margin-right: 0;
  }

  .item_bg {
    background-color: #FDE52F;
    color: black;
  }

  .item_bg1 {
    background-color: #F6F6F6;
  }
}

.content3 {
  display: flex;
  align-items: center;

  .input_content {
    margin-left: 20rpx;
    flex: 1;
  }
}

.img_item {
  margin-right: 14rpx;

  .img_item:nth-of-type(5n) {
    margin-right: 0;
  }

  .add {
    width: 120rpx;
    height: 188rpx;
    background-color: #F6F6F6;
    font-size: 88rpx;
    font-weight: lighter;
    display: flex;
    align-items: center;
    color: #999999;
  }
}
</style>
